/*
 * @Author: your name
 * @Date: 2021-12-12 22:06:25
 * @LastEditTime: 2022-03-15 15:14:31
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /visualNotes/src/modules/Login/index.tsx
 */
import React, { useState } from "react";
import { login, users, SUCCESS_CODE } from "@/service";
import { Button, message as Message, Form, Input, Select } from "antd";
import { useHistory } from "react-router-dom";
import { useParams } from "react-router-dom";
import style from "./index.module.less";

const { Item } = Form;
const { Option } = Select;

const Login = () => {
  const history = useHistory();
  const [form] = Form.useForm();
  const [isFirstLogin, setIsFirstLogin] = useState<boolean>(false);
  const { type } = useParams<{ type: "in" | "register" }>();

  const userLogin = async () => {
    const { email, password } = form.getFieldsValue();
    const { code, message, data } = await login.userLogin(email, password);
    if (code === SUCCESS_CODE) {
      if (!data) {
        setIsFirstLogin(true);
      } else {
        Message.success(message);
        history.push("/");
      }
    } else {
      Message.error(message);
    }
  };

  const userSign = async () => {
    const { email, password } = form.getFieldsValue();
    const { code, message } = await login.userSign(email, password);
    if (code === SUCCESS_CODE) {
      Message.success(message);
      history.push("/login/in");
    } else {
      Message.error(message);
    }
  };

  const updateUserInfo = async () => {
    const { nickName,number, gender } = form.getFieldsValue();
    const { uid, email } = login.getCurrentUser() || {};
    const user = {
      UUID: uid || "",
      number,
      nickName,
      email,
      gender,
      role: "std",
    };
    const { code, data, message } = await users.addUser(user);
    if (code === SUCCESS_CODE && data) {
      history.push("/");
    } else {
      Message.error(message);
    }
  
  };

  const onGenderChange = async () => {};

  return (
    <>
      <div className={style.container}>
        {/* 注册表单 */}
        <div
          className={style.formContainer}
          hidden={type === "in" || isFirstLogin}
        >
          <div className={style.formHeader}>注册表单</div>
          <Form
            form={form}
            name="user"
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 16 }}
          >
            <Item label="邮箱" name="email" rules={[]}>
              <Input></Input>
            </Item>
            <Item label="密码" name="password">
              <Input.Password></Input.Password>
            </Item>
            <Item wrapperCol={{ offset: 4, span: 16 }}>
              <Button type="primary" onClick={userSign}>
                注册
              </Button>
              <Button htmlType="button" onClick={() => history.push("/")}>
                取消
              </Button>
            </Item>
          </Form>
        </div>

        {/* 登录表单 */}
        <div
          className={style.formContainer}
          hidden={type === "register" || isFirstLogin}
        >
          <div className={style.formHeader}>登录信息</div>
          <Form
            form={form}
            name="user"
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 16 }}
          >
            <Item label="邮箱" name="email" rules={[]}>
              <Input></Input>
            </Item>
            <Item label="密码" name="password">
              <Input.Password></Input.Password>
            </Item>
            <Item wrapperCol={{ offset: 4, span: 16 }}>
              <Button type="primary" onClick={userLogin}>
                登录
              </Button>
              <Button htmlType="button" onClick={() => history.push("/")}>
                取消
              </Button>
            </Item>
          </Form>
        </div>

        {/* 基本信息表单 */}
        <div className={style.formContainer} hidden={!isFirstLogin}>
          <div className={style.formHeader}>基本信息</div>
          <Form
            form={form}
            name="basicInfo"
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 16 }}
          >
            <Item label="昵称" name="nickName" rules={[]}>
              <Input></Input>
            </Item>
            <Item label="学号" name="number" rules={[]}>
              <Input></Input>
            </Item>
            <Item label="性别" name="gender">
              <Select
                placeholder="请选择性别"
                onChange={onGenderChange}
                allowClear
              >
                <Option value="male">男生</Option>
                <Option value="female">女生</Option>
              </Select>
            </Item>
            <Item wrapperCol={{ offset: 4, span: 16 }}>
              <Button type="primary" onClick={updateUserInfo}>
                确认
              </Button>
              <Button htmlType="button" onClick={() => form.resetFields()}>
                重置
              </Button>
            </Item>
          </Form>
        </div>
      </div>
    </>
  );
};

export default Login;
